<template>
	<view class='warp '>

		<view class="slide box-s3" v-for="(item,index) in list" :key="index">
			<!-- <image class="image1" :src="item.image"></image> -->
			<view class="name" style="line-height: 35rpx;">
				<text style="display: inline-block;height: 35rpx;">订单号:{{item.order_id}}</text>
			</view>
			<text class="iconfont active" v-if="ids.indexOf(item.id+',') != -1"
				@click.stop="abs(item.id)">&#xe689;</text>
			<text class="iconfont notactive" v-if="ids.indexOf(item.id+',') == -1"
				@click.stop="add(item.id)">&#xe61e;</text>
			<view class="addr">日期：{{item.add_time}}</view>
			<view class="shifu">师傅：{{item.wokre_name}}</view>
			<view class="filall">总费用：<text class="money">{{item.total_price}}元</text></view>
		</view>
		<view class="footer">
			<button @click="jumpTo()">申请开票</button>
		</view>
		
	</view>
</template>

<script>
	import {invoiceOrder } from '../../../api/api.js'
	export default {
		data() {
			return {
				ids: "",
				list: [],
				page:1,
				limit:10,
			}

		},
		created() {
			this.datainit()
		},
		methods: {
			// 数据初始化
			datainit(){
				let data = {
					page:this.page,
					limit:this.limit
				}
				invoiceOrder(data).then(res=>{
					this.list = res.data
				})
			},
			add(e) {
				this.ids += e + ','
				console.log('this,ids1', e, this.ids)
			},
			abs(e) {
				this.ids = this.ids.replace(e + ',', '')
				console.log('this,ids2', e, this.ids)
			},
			jumpTo() {
				console.log(this.ids)
				if (!this.ids) return uni.showToast({
					title: '请选择需要开票的订单!',
					icon: 'none'
				})
				let list = []
				let ids = []
				ids = this.ids.split(',')
				this.list.forEach(item => {
					ids.forEach(items => {
						if (items == item.id) {
							list.push(item)
						}
					})
				})
				console.log('被选中的集合', list)
				
				// return
				uni.navigateTo({
					url: `/pages/users/tjsq/index?ids=${JSON.stringify(this.ids)}&list=${JSON.stringify(list)}`,
				})
			}
		}

	}
</script>

<style scoped lang='less'>
	page {
		background-color: #F6F9FF !important;
	}

	.warp {
		width: 100%;
		height: 100%;
		background-color: #F6F9FF;
		padding-top: 30rpx;
		padding-bottom: 50rpx;


		.slide {
			margin-left: 50%;
			transform: translateX(-50%);
			width: 90%;
			display: flex;
			height: 260rpx;
			align-items: center;
			border-radius: 10rpx;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 30rpx 20upx;
			padding-right: 0;
			margin-top: 30rpx;
			background-color: #FFFFFF;
			position: relative;

			.image1 {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				width: 130rpx;
				height: 140rpx;
			}

			.name {
				position: absolute;
				color: #333333;
				font-size: 32rpx;
				top: 20rpx;
				left: 20rpx;
			}



			.shifu {
				position: absolute;
				color: #999999;
				font-size: 24rpx;
				top: 70rpx;
				left: 20rpx;
			}

			.addr {
				position: absolute;
				color: #999999;
				font-size: 24rpx;
				top: 120rpx;
				left: 20rpx;
			}

			.active {
				position: absolute;
				right: 0;
				top: 50rpx;
				color: #5490FE !important;
			}

			.notactive {
				position: absolute;
				right: 0;
				top: 50rpx;
				color: #999;
			}

			.kxz,
			.xxz.mlz {
				position: absolute;
				font-size: 20rpx;
				top: 20rpx;
				right: 10rpx;
			}

			.kxz {
				color: #5490FE;
			}

			.mlz {
				color: #FD3833;
			}

			.xxz {
				color: #999999;
			}

			.filall {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}

			.priceNum {
				position: absolute;
				display: flex;
				font-size: 20rpx;
				justify-content: center;
				align-items: center;
				top: 90rpx;
				left: 200rpx;

				.price {
					color: #5490FE;
					padding: 0 10rpx;
					background-color: #F2F7FF;
				}

				.num {
					margin-left: 15rpx;
					color: #FEC860;
					padding: 0 10rpx;
					background-color: #FFFBD6;
				}
			}
		}
	}
	.footer{
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		line-height: 200rpx;
		background-color: #F6F9FF;
	}
</style>
